<template>
    <div class="pwd-box">
        <el-steps :active="active" finish-status="success">
            <el-step title="验证手机号码" />
            <el-step title="换绑新手机" />
            <el-step title="重置密码" />
            <el-step title="完成" />
        </el-steps>
        <el-form ref="ruleFormRef" :model="form" label-width="120px" style="margin-top: 30px;" :rules="rules">
            <template v-if="active === 1">
                <el-form-item label="已绑定手机号码" prop="phone">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-row>
                        <el-col :span="18">
                            <el-input v-model="form.code" />
                        </el-col>
                        <el-col :span="4">
                            <el-button type="success">发送验证码</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </template>
            <template v-if="active === 2">
                <el-form-item label="新手机号码" prop="newPhone">
                    <el-input v-model="form.newPhone" />
                </el-form-item>
            </template>
            <template v-if="active === 3">
                <el-form-item label="新密码" prop="newPwd">
                    <el-input v-model="form.newPwd" placeholder="请输入新密码" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input v-model="form.confirmPwd" placeholder="请输入确认密码" type="password" />
                </el-form-item>
            </template>
            <el-form-item v-if="active<4">
                <el-button type="success" @click="next">
                    下一步
                </el-button>
            </el-form-item>

        </el-form>
        <div class="flex justify-center" v-if="active == 4">
            <div class="text-center  leading-50  text-xl bg-gray-100 w-100 h-50 " >
                手机更新完成，10秒后重新登录
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const ruleFormRef = ref(null)
const active = ref(1)
const form = reactive({
    phone: userStore.user.phone,
    code: '',
    newPhone: '',
    newPwd:'',
    confirmPwd:''
})

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入新密码!'))
    } else {
        if (form.confirmPwd !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('confirmPwd')
        }
        callback()
    }
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再一次输入密码'))
    } else if (value !== form.newPwd) {
        callback(new Error("两次密码不一致!"))
    } else {
        callback()
    }
}
const rules = reactive({
    code: [{ required: true, message: '请输入验证码', trigger: 'blur' },],
    newPhone: [{ required: true, message: '请输入新手机号', trigger: 'blur' },],
    newPwd: [{ validator: validatePass, trigger: 'blur' }],
    confirmPwd: [{ validator: validatePass2, trigger: 'blur' }],
})
const next = () => {
    active.value++ 
}

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
        }
    })
}
</script >
<style lang="less" scoped>
.pwd-box {
    padding: 20px;
    border: 1px solid #ddd;
}
.el-input {
    width: 300px;
}
</style>